<template>
  <div id="billing">
    <div class="b-box">
      <div>收费管理/账单管理</div>
      <h3>账单管理</h3>
      <div class="border">
        <div class="choose1">
          <span>缴纳状态</span>
          <el-select
            v-model="service.status"
            class="m-2"
            placeholder="请选择缴费状态"
          >
            <el-option
              v-for="item in feeStatus"
              :key="item.code"
              :value="item.status"
              :label="item.status"
            />
          </el-select>
        </div>

        <div class="choose">
          <span>收费项目</span>
          <el-select
            v-model="service.service"
            class="m-2"
            placeholder="请选择收费项目"
          >
            <el-option
              v-for="item in feeType"
              :key="item.id"
              :value="item.service"
              :label="item.service"
            />
          </el-select>
        </div>
        <div>
          <el-button type="primary" @click="getData()">查询</el-button>
          <el-button @click="reset()">重置</el-button>
        </div>
      </div>
    </div>

    <div class="b-box2">
      <div class="button">
        <p>账单列表</p>
        <div>
          <router-link to="/home/addBilling">
            <el-button type="primary">+&nbsp;&nbsp;新建账单</el-button
            >&nbsp;&nbsp;
          </router-link>
          <el-button @click="delAll()">批量操作</el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" @select="" prop="code" width="55">
        </el-table-column>
        <el-table-column prop="room" label="房间号" width="120" />
        <el-table-column prop="service" label="收费类型" width="120" />
        <el-table-column prop="price" label="单价" width="120" />
        <el-table-column prop="startTime endTime" label="收费周期" width="200">
          <template #default="scope"
            >{{ scope.row.startTime.split(' ')[0] }}~{{
              scope.row.endTime.split(' ')[0]
            }}</template
          >
        </el-table-column>
        <el-table-column prop="money" label="费用合计" width="120" />
        <el-table-column prop="status" label="缴费状态" width="120" />
        <el-table-column prop="lateFee" label="滞纳金" width="120" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row.code)"
              >编辑</el-button
            >

            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row.code)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <Page
          :total="total"
          :count="count"
          :currentPage="page"
          @handleCurrentChange="handleCurrentChange"
          @handleSizeChange="handleSizeChange"
        ></Page>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
#billing {
  background: #f0f2f5;
  height: 100%;
  // width: 100%;
  a {
    text-decoration: none;
  }
  h3 {
    margin: 20px 0;
  }
  .b-box {
    height: 200px;
    width: 90%; /*  */
    padding: 15px 0 15px 30px;
    margin: 20px auto;

    border: 1px solid #e9e9e9;
    background-color: #fff;
    .border {
      height: 50px;
      width: 100%;
      border-top: 1px solid #e9e9e9;
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      .list {
        // width: 320px;
        border: 1px solid #e9e9e9;
        padding: 8px 120px 8px 5px;
        margin: -2px 0 0 10px;
      }
      .el-icon--right {
        position: absolute;
        top: 6px;
        right: 3px;
      }
      .choose {
        margin-right: 280px;
        .list {
          border: 1px solid #e9e9e9;
          padding: 7px 220px 7px 5px;
          margin: -2px 0 0 10px;
        }
        .el-icon--right {
          position: absolute;
          top: 6px;
          right: 3px;
        }
      }
    }

    .el-button {
      padding: 0 -30px;
      position: relative;
      top: 0;
      right: 20px;
      border-radius: 2px;
      width: 80px;
    }
  }
  .b-box2 {
    width: 90%; /*  */
    padding: 15px 0 15px 30px;
    margin: 20px auto;
    border: 1px solid #e9e9e9;
    background-color: #fff;
    .button {
      display: flex;
      justify-content: space-between;
      margin-right: 30px;
      .el-button {
        width: 95px;
        border-radius: 2px;
      }
    }
    .el-table {
      margin-top: 30px;
      .el-button {
        border: 0;
        background: white;
        color: #1890ff;
      }
    }
  }
  .page {
    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
<script setup lang="ts">
import userStore from '../../store/index';
import Page from '../../components/page.vue';
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
const store = userStore();
const input = ref('');
const router = useRouter();

let total = ref(0);
let tableData = ref([]);
let page = ref(1);
let count = ref(5);
let code = ref([]);
let multipleSelection = ref<number[]>([]);
const feeType = ref([
  {
    id: '',
    service: '',
  },
]);
const feeStatus = ref([
  {
    code: '',
    status: 0,
  },
]);
const service = ref({ service: '', status: '' });
//编辑
const handleEdit = (code: number) => {
  store.$state.code = code;
  router.push({ path: '/home/editBilling' });
};
//批量删除id
const handleSelectionChange = (val: [{ code: number }]) => {
  let arr = new Array();
  val.forEach((v) => {
    arr.push(v.code);
  });
  multipleSelection.value = [...arr];
  arr.length = 0;
};
const list2 = () => {
  axios({
    url: '/item/queryItemAll',
    method: 'get',
  }).then(({ data }) => {
    if (data.code == '0') {
      feeType.value = data.data;
    } else {
      ElMessage.error('加载失败');
    }
  });
};
const list = () => {
  axios({
    url: '/bill/status',
    method: 'post',
  }).then(({ data }) => {
    if (data.code == '0') {
      feeStatus.value = data.data;
    } else {
      ElMessage.error('加载失败');
    }
  });
};
//渲染
const getData = () => {
  axios({
    url: '/bill/list',
    method: 'get',
    params: {
      page: page.value,
      limit: count.value,
      status: service.value.status,
      service: service.value.service,
    },
  }).then(({ data }) => {
    console.log(data);

    if (data.code == '0') {
      tableData.value = data.data;
      total.value = data.total;
    } else {
      ElMessage.error('加载失败');
    }
  });
};
//批量删除
const delAll = () => {
  axios({
    url: '/bill/ids/delete',
    method: 'delete',
    data: multipleSelection.value,
  }).then(({ data }) => {
    if (data.code == '0') {
      ElMessage.success('删除成功');
      getData();
    } else {
      ElMessage.error('删除失败');
    }
  });
};
const handleDelete = (id: number) => {
  console.log(id);
  axios({
    url: '/bill/delete',
    method: 'delete',
    params: { code: id },
  }).then(({ data }) => {
    if (data.code == '0') {
      ElMessage.success('删除成功！');
      getData();
    } else {
      ElMessage.error('删除失败！');
    }
  });
};
const reset = () => {
  service.value.status = '';
  input.value = '';
  service.value.service = '';
  getData();
};
const handleSizeChange = (val: number) => {
  count.value = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  console.log(val);
  page.value = val;
  getData();
};
onMounted(() => {
  getData();
  list2();
  list();
});
</script>
